{extend name="sitehome@style/base"/}
{block name="main"}
<style>
    .bottom {
        text-align: center;
        position: fixed;
        width: 100%;
        background: #fff;
        bottom: 31px;
        left: 10%;
        padding: 14px 0;
        box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
    }
    .layui-form-checkbox[lay-skin=primary] i {
        font-weight: bold;
        width: 15px;
        height: 15px;
    }
    textarea#sms_content {
        padding-top: 5px;
    }
    .preview-box > .graphic-message > span.time, .preview-box > .graphic-message > span.author {
        display: inline-block;
        color: #AAA;
        margin-top: 7px;
    }
    .wx-img {
        text-align: left;
        height: 600px;
        border: 1px solid #d3d3d3;
    }
    .graphic-message {
        padding: 10px;
    }
.wechat-template-content {
	margin: auto;
    padding: 15px 15px 15px;
    width: 238px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: absolute;
    top: 120px;
    left: 69px;
    line-height: 14px;
}
.wechat-template-content .wechat-template-title {
    margin-bottom: 5px;
    font-size: 18px;
    line-height: 1;
    color: #000;
}
.wechat-template-content .wechat-template-html {
    margin: 20px 0;
    font-size: 12px;
    color: rgba(0,0,0,.71);
}
.wechat-template-content .wechat-template-link {
    border-top: 1px solid #e5e5e5;
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    color: #576b95;
    cursor: default;
}
.wechat-template-date:before {
	content: "";
    position: absolute;
    top: 11px;
    left: -5px;
    height: 9px;
    border-left: 20px solid #fff;
    border-bottom-right-radius: 16px;
    -webkit-transform: translateY(-2px);
    -moz-transform: translateY(-2px);
    border-top-left-radius: 29px;
    -ms-transform: translateY(-2px);
    transform: translateY(-2px);
}
img.effect {
    width: 320px;
}
.wechat-template-date {
    line-height: 23px;
    color: #666;
}
.headimg_icon {
    position: absolute;
    width: 35px;
    height: 35px;
    top: 122px;
    left: 11px;
}
</style>
<div class="layui-row">
    <div class="layui-col-md4 preview " style="text-align: left">
        <!--短信start-->
        <div class="layui-form">
            <div style="width:320px;position: relative;">
               <div>
			     <img class="effect" src="ADDON_MSGTPL_IMG/wechat-fans-msg.png">
			     <div>
			     	<img class="headimg_icon" src="ADDON_MSGTPL_IMG/wechat-fans-msg.png">
			     </div>
				 <div class="wechat-template-content">
					 <div class="wechat-template-date">
						<pre></pre>
					 </div>
				 </div>
			 </div>
            </div>
        </div>
        <!--短信end-->
    </div>

    <div class="layui-col-md5 layui-form" style="text-align: left">
        <div class="layui-form-item">
            <div class="layui-form-item">
                <label class="layui-form-label"><span class="required">*</span>群发对象</label>
                <div class="layui-input-block">
                    <select name="type" lay-verify="required" lay-filter="select_wx" id="select_wx">
                        <option value="">请选择</option>
                        <option value="0">全部</option>
                        {volist name="$member_lable_list['data']"  id="vo"}
                            <option value="{$vo['label_id']}">{$vo['label_name']}</option>
                        {/volist}
                    </select>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <label class="layui-word-aux">当前选项有<span class="send_num">0</span>人</label>
            </div>
        </div>
        <br>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="required">*</span>发送文字</label>
            <div class="layui-input-block">
				<textarea rows="" name="content" lay-verify="required" cols="" class="layui-textarea" id="sms_content"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input id="select_terms" value="1" type="checkbox" name="" title="同意《服务协议》" lay-skin="primary"  lay-filter="select_terms">
            </div>
        </div>
        <div class="bottom">
            <button class="layui-btn layui-btn-disabled" id="save" lay-submit lay-filter="save">保存</button>
            <button class="layui-btn layui-btn-primary" onclick="javascript:history.back(-1);">取消</button>
        </div>
    </div>
</div>
{/block}
{block name="script"}
<script>
    layui.use(['form'], function() {
        var form = layui.form;
        $('#sms_content').bind('input propertychange', function() {
            if ($(".textareachange").val() != "") {
                var content = $('#sms_content').val();
                $('.wechat-template-date pre').text(content);
            }
        });
        form.on('checkbox(select_terms)', function(data) {
            if(data.elem.checked) {
                $('#save').removeClass('layui-btn-disabled');
            }else {
                $('#save').addClass('layui-btn-disabled');
            }
        });
        
        form.on('select(select_wx)', function(data){
		  $.ajax({
			  url : '{:addon_url("Message://sitehome/Sendwechat/getLabelNumber")}',
			  type : 'post',
			  data : {'id' : data.value},
			  dataType : "JSON",
			  success : function(res) {
				  $('.send_num').text(res.data);
			  }
		  })
		});
	
		var repeat_flag = false;//防重复标识
        form.on('submit(save)', function(data){
            if(repeat_flag){return;}
			repeat_flag = true;
            $.ajax({
                url : '{:addon_url("Message://sitehome/Sendwechat/send")}',
                type : 'post',
                data : data.field,
                dataType : "JSON",
                success : function(res) {
                   if(res.errcode>0) {
                       layer.msg('发送成功');
                       window.location.href = nc.url('Message/sitehome/index/index', {"id" : data.id});
                   }else {
					   repeat_flag = false;
                       layer.msg(res.errmsg);
                   }
                }

            })
        })

    });
    function smsCode(obj) {
        $(obj).val($(obj).val().replace(/[^\r\n0-9]/g,''));
        var areaRows = $(obj).val().split("\n").length; //获取行数
        $('.send_num').text(areaRows);
    }
</script>
{/block}